<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>气枪震源实验实时处理技术系统</title>
		<style type="text/css">
			p {
				margin: 0px;
				color: #00ffc7;
				letter-spacing: 2px;
			}
			span {
				color: #00ffc7;
				letter-spacing: 2px;
			}
			body {
				margin: 0px;
			}
			.titlel {
				background: url(/images/titlel.png) no-repeat;
				height: 50px;
				line-height: 50px;
				width: 408px;
			}
			
			.progress {
				margin-top: 5px;
		  		overflow: hidden;
				height: 8px;
				background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
				background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
				background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
				background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
				background-image: linear-gradient(to bottom, #003637, #003637);
				background-repeat: repeat-x;
  				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
				-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
				-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
				box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 10px;
				width:270px;
			}

			.progress .bar {
				width: 0%;
				height: 100%;
				color: #ffffff;
				float: left;
				font-size: 12px;
				text-align: center;
				align-items: center;
				display: flex;
				justify-content: center;
				text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
				background-color: #0e90d2;
				background-image: -moz-linear-gradient(top, #149bdf, #0480be);
				background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
				background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
				background-image: -o-linear-gradient(top, #149bdf, #0480be);
				background-image: linear-gradient(to bottom, #00ffc7, #00ffc7);
				background-repeat: repeat-x;
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
				-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
				-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
				box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				-webkit-transition: width 0.6s ease;
				-moz-transition: width 0.6s ease;
				-o-transition: width 0.6s ease;
				transition: width 0.6s ease;
			}
			.tooltip {
				border-radius: 0px;
			}
		</style>
	</head>
	<body background="/images/bg.jpg">
		<div style="background: url(/images/title.png) no-repeat;height: 84px;line-height: 75px;">
			<span style="font-size: 40px;margin-left: 30px;font-weight: bold;">气枪震源实验实时处理技术系统</span>
			<span style="font-size: 18px;float: right;width: 1100px;text-align: right;border-bottom: 4px solid #000;border-image: linear-gradient(to right,#1d0b33,#23b7cb) 1 10;letter-spacing: 1px;line-height: 30px;padding-right: 20px;margin-top: 20px;padding-bottom: 10px;">
				<img id="full" alt="全屏" src="/images/fullscreen.png" style="float: right;">
				<span id="time" style="float: right;margin: 0 10px;line-height: 20px;"></span>
				<img alt="" src="/images/clock.png" style="float: right;">
			</span>
		</div>
		<div style="height: 700px;width: 100%;margin-top: 30px;">
			<div style="display: inline-block;width: 1000px;float: left;">
				<div style="float: left;">
					<div class="titlel">
						<span style="font-size: 25px;margin-left: 30px;font-weight: bold;">气枪激发效果分布图</span>
					</div>
					<div style="height: 532px;">
						<div style="margin-left: 30px;margin-top: 35px;width: 270px">
							<span id="total" style="font-size: 50px;font-weight: bold;"></span>
							<span>个</span>
							<span style="float: right;margin-top: 40px;">台站总数</span>
				        	<div class="progress">
								<div class="bar" style="width: 100%;"></div>
						    </div>
						</div>
						<div style="margin-left: 30px;margin-top: 35px;width: 270px">
							<span id="online" style="font-size: 50px;font-weight: bold;color: #00ff00;"></span>
							<span>个</span>
							<span style="float: right;margin-top: 40px;">接收信号正常</span>
				        	<div class="progress">
								<div id="onlinebar" class="bar" style="background-image: linear-gradient(to bottom, #00ff00, #00ff00);width: 0%;"></div>
						    </div>
						</div>
						<div style="margin-left: 30px;margin-top: 35px;width: 270px">
							<span id="error" style="font-size: 50px;font-weight: bold;color: #ff0000;"></span>
							<span>个</span>
							<span style="float: right;margin-top: 40px;">接收信号异常</span>
				        	<div class="progress">
								<div id="errorbar" style="background-image: linear-gradient(to bottom, #ff0000, #ff0000);width: 0%;"></div>
						    </div>
						</div>
						<div style="margin-left: 30px;margin-top: 35px;width: 270px">
							<span id="offline" style="font-size: 50px;font-weight: bold;color: #666871;"></span>
							<span>个</span>
							<span style="float: right;margin-top: 40px;">未接收到信号</span>
				        	<div class="progress">
								<div id="offlinebar" class="bar"  style="background-image: linear-gradient(to bottom, #668686, #668686);width: 0%;"></div>
						    </div>
						</div>
					</div>
				</div>
				<div style="float: left;position: absolute;top: 30px;left: 150px;">
					<div id="map" style="width: 1000px;height: 850px;"></div>
				</div>
			</div>
			<div style="display: inline-block;float: left;">
				<div style="float: left;margin-top: 80px;">
					<div style="width: 270px;margin-top: 10px;">
						<div style="background: url(/images/infobg.png) no-repeat;width: 270px;height: 126px;">
							<p style="margin-left: 20px;padding-top: 15px;">
								<span id="maxdis" style="font-size: 50px;font-weight: bold;"></span>
								<span>千米</span>
							</p>
							<span style="margin-left: 20px;">最远距离</span>
						</div>
					</div>
					<div style="width: 270px;margin-top: 10px;">
						<div style="background: url(/images/infobg.png) no-repeat;width: 270px;height: 126px;">
							<p style="margin-left: 20px;padding-top: 15px;">
								<span id="guncount" style="font-size: 50px;font-weight: bold;"></span>
								<span>次</span>
							</p>
							<span style="margin-left: 20px;">气枪信号次数</span>
						</div>
					</div>
					<div style="width: 270px;margin-top: 10px;">
						<div style="background: url(/images/infobg.png) no-repeat;width: 270px;height: 126px;">
							<p style="margin-left: 20px;padding-top: 15px;">
								<span id="mag" style="font-size: 50px;font-weight: bold;"></span>
								<span>级</span>
							</p>
							<span style="margin-left: 20px;">等效单次震级</span>
						</div>
					</div>
					<div>
						<p style="background-image: linear-gradient(to right, #111f41 , #111f4100 );font-weight: bold;line-height: 30px;margin-top: 50px; style="font-size: 14px;"">地图图例</p>
						<div style="margin-top: 10px">
							<span style="font-size: 20px;color: #00ff00;">●</span><span style="font-size: 12px;"> 接收信号正常</span>
							<span style="background: url(/images/line1.png) bottom no-repeat;width: 20px;height: 20px;display: inline-block;margin-left: 20px;"></span><span style="font-size: 12px;"> 航线闪断</span>
						</div>
						<div>
							<span style="font-size: 20px;color: #ff0000;">●</span><span style="font-size: 12px;"> 接收信号异常</span>
							<span style="background: url(/images/line2.png) bottom no-repeat;width: 20px;height: 20px;display: inline-block;margin-left: 20px;"></span><span style="font-size: 12px;"> 航线正常</span>
						</div>
						<div>
							<span style="font-size: 20px;color: #666f7b;">●</span><span style="font-size: 12px;"> 未接收到信号</span>
							<span style="background: url(/images/line3.png) bottom no-repeat;width: 20px;height: 20px;display: inline-block;margin-left: 20px;"></span><span style="font-size: 12px;"> 航船关键位置</span>
						</div>
					</div>
				</div>
				<div style="position: relative;overflow: hidden;height: 670px;width: 623px;">
					<div class="titlel">
						<span style="font-size: 25px;margin-left: 30px;font-weight: bold;">实时气枪激发信号</span>
					</div>
					<div id="linecontent" style="overflow-x: hidden;overflow-y: scroll;height: 670px;position: absolute;left: 0;width: 640px;">
						<div id="linediv" style="height: 52px;margin-top: 3px;display: none;">
							<div style="text-align: center;width: 140px;height: 52px;background-color: #002b4880;line-height: 25px;float: left;">
								<p class="name" style="font-weight: bold;">FJ.DHSB.BHZ</p>
								<p class="km">7.918KM</p>
							</div>
							<div class="linechart" style="width: 480px;height: 52px;float: left;">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div>
			<div style="width: 605px;float: left;margin-top: -120px;">
				<div class="titlel">
					<span style="font-size: 25px;margin-left: 30px;font-weight: bold;">震源位置实时监控</span>
				</div>
				<p style="margin-left: 30px;margin-top: 20px;">气枪震源偏差实时统计</p>
				<p style="margin-left: 30px;margin-top: 20px;">已激发<span id="activecount" style="font-size: 30px;font-weight: bold;"></span><span>次</span></p>
				<div style="float: right;margin-right: 120px;margin-top: 100px;">
					<div style="background: url(/images/c1.png) no-repeat;line-height: 19px;padding-left: 30px;margin-top: 10px;background-position: 0 3px;"><span>1米</span></div>
					<div style="background: url(/images/c2.png) no-repeat;line-height: 19px;padding-left: 30px;margin-top: 10px;background-position: 0 3px;"><span>2米</span></div>
					<div style="background: url(/images/c3.png) no-repeat;line-height: 19px;padding-left: 30px;margin-top: 10px;background-position: 0 3px;"><span>3米</span></div>
				</div>
				<div id="offset" style="background: url(/images/offset.png) no-repeat;width: 258px;height: 258px;float: right;margin-right: 50px;margin-top: -30px;">
					<img id="circle" alt="" src="/images/offsetIcon.png" style="position: absolute;padding-top: 118px;padding-left: 122px;display: none;">
				</div>
			</div>
			<div style="float: left;margin-top: -2px;">
				<div style="background: url(/images/titlel2.png) no-repeat;width: 50px;height: 258px;padding-left: 13px;padding-top: 10px;float: left;">
					<span style="font-size: 25px;font-weight: bold;line-height: 28px;">气枪信号时距图</span>
				</div>
				<div style="width: 220px;height: 200px;float: left;transform: rotate(-90deg);text-align: center;"><span style="font-size: 14px;">N11-10次叠加-Z</span></div>
				<div id="td" style="width: 1180px;height: 250px;float: left;margin-left: -180px;"></div>
			</div>
		</div>
		
		<script src="/js/jquery.js"></script>
		<script src="/js/echarts.js"></script>
		<script type="text/javascript">
			$(function() {
				//全屏
				$("#full").click(function(){
					fullscreen()
				})
				
				//右侧流数据
				var option1 = {
					grid : {
						x : "1%",//x 偏移量
						y : "1%", // y 偏移量
						width : "100%", // 宽度
						height : "100%"// 高度
					},
					xAxis : { 
						type : 'time',
						show : false,
						boundaryGap : false,
					},
					yAxis : {
						type : 'value',
						show : false,
					},
					tooltip: {
					    trigger: 'axis',
					    formatter: function (params) {
					      params = params[0];
					      var date = new Date(params.name);
					      return (
					        date.toLocaleTimeString('chinese', {
								hour12 : false
							})
					      );
					    },
					    textStyle: {
					        color: '#fff' ,
					    },
					    position: function(point, params, dom, rect, size){
					    	      // 固定在顶部
				    		return [point[0]+1, 0];
					    },
					    extraCssText: 'border-radius: unset;background-color:rgba(0, 0, 0, 0.8);border-style:unset;height:52px;padding:0px 10px;line-height:52px;',
					    axisPointer : {
							type : 'line',
							lineStyle : {
								color : '#fff',
								type : 'solid',
							},
							animation : false
						}
					},
					series : [ {
						data : [],
						type : 'line',
						symbolSize : 0,
						itemStyle : {
							color : "#00ffc7"
						},
						lineStyle : {
							color : "#00ffc7",
							width : 1
						},
						emphasis: {
					        lineStyle: {
					        	width: 1 ,
					        }
					    }
					} ]
				}
				
				let data = []
				let now = new Date();
				let oneDay = 1000;
				let value = Math.random() * 1000;
				function randomData() {
					now = new Date(+now + oneDay);
					value = (Math.random() * 21) - (Math.random() * 21);
					return {
						name : now.toString(),
						value : [ +now, Math.round(value) ]
					};
				}
				var chartlist = []
				for (var i = 0; i < 10; i++) {
					data = []
					var line = $("#linediv").clone()
					$("#linecontent").append(line)
					line.show()
					var myChart = echarts.init(line.children(".linechart").get(0))
					
					//模拟些数据
					for (var j = 0; j < 500; j++) {
						data.push(randomData());
					}
					option1.series[0].data = data
					myChart.setOption(option1)
					chartlist.push(myChart)
				}
				var isover = false
				
				$("#linecontent").delegate(".linechart","mouseover",function(){
					isover = true;
				})
				$("#linecontent").delegate(".linechart","mouseout",function(){
					isover = false;
				})
				
				window.setInterval(function() {
					for (var i = 0; i < 5; i++) {
						data.shift();
						data.push(randomData());
					}
					$.each(chartlist,function(){
						this.setOption({
							series : [ {
								data : data
							} ]
						});
						if(!isover){
							this.dispatchAction({
								type : 'showTip',
								// 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
								seriesIndex : 0,
								// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
								dataIndex : data.length*0.7,
							// 可选，数据项名称，在有 dataIndex 的时候忽略
							//name?: string,,
							// 本次显示 tooltip 的位置。只在本次 action 中生效。
							// 缺省则使用 option 中定义的 tooltip 位置。
								//position: [342, 0],
							})
						}
					})
					
				}, 1000);
				
				

				//时距图
				var td = echarts.init($("#td").get(0));
				// 指定图表的配置项和数据
				var option2 = {
					grid : {
						show : true,
						left : "2%",
						bottom : "10%",
						width : "100%", // 宽度
						height : "90%",// 高度
						containLabel : true,
						borderColor : "#00ffc7"
					},
					xAxis : {
						type : 'value',
						name : '∆d/km',
						nameLocation : "center",
						nameTextStyle : {
							color : "#00ffc7",
							fontSize : 14,
						},
						nameGap : 30,
						splitNumber : 40,
						axisLine : {
							lineStyle : {
								color : "#00ffc7",
							}
						},
						splitLine : {
							show : false
						},
						axisTick : {
							show : true,
						},
						axisLabel : {
							show : true,
							formatter : function(value, index) {
								if (index % 5 == 0) {
									return value
								} else {
									return ""
								}
							}
						}
					},
					yAxis : {
						type : 'category',
						boundaryGap : false,
						name : 't/s      ',
						nameTextStyle : {
							color : "#00ffc7",
							fontSize : 14,
						},
						nameGap : -15,
						axisLine : {
							lineStyle : {
								color : "#00ffc7",
							}
						},
						axisLabel : {
							show : true,
							interval : 99,
							formatter : function(value, index) {
								if (index % 500 == 0) {
									return index / 500 * 50 + ""
								} else {
									return ""
								}
							}
						}
					},
					series : []
				}
				$.get("/td", function(data) {
					option2.series.length = 0

					$.each(data, function() {
						option2.series.push({
							data : this,
							type : 'line',
							symbolSize : 0,
							itemStyle : {
								color : "#00ffc7"
							},
							lineStyle : {
								color : "#00ffc7",
								width : 1
							}
						})
					})
					// 使用刚指定的配置项和数据显示图表。
					td.setOption(option2);
				})

				//地图及信息
				var map = echarts.init($("#map").get(0));
				$.get('/json/fujian.json', function(geoJson) {
					echarts.registerMap('FJ', geoJson);

					var option3 = {
						geo : [ {
							map : 'FJ',
							aspectScale : 0.9,
							show : false
						} ],
						series : [ {
							name : '台站图',
							type : 'map',
							mapType : 'FJ', // 自定义扩展图表类型
							label : {
								show : true,
								color : "#0572aa"
							},
							aspectScale : 0.9,
							itemStyle : {
								areaColor : "#2a3546",
								borderColor : "#00f5d3",
								borderWidth : 1,
							},
							emphasis : {
								itemStyle : {
									areaColor : "#00ffc7",
								}
							},
							select : {
								label : {
									color : "#00ffc7",
								},
								itemStyle : {
									areaColor : "#00255d",
								}
							},
							markPoint : {
								data : []
							},
							markLine : {
								symbol : "triangle",
								symbolSize : 6,
								symbolRotate : 0,
								label : {
									show : false
								},
								lineStyle : {
									type : "solid",
									width : 1
								},
								data : [ [ {
									name : 'N01',
									coord : [ 118.770878, 24.125730 ],
									lineStyle : {
										color : "#0d6dec" //蓝色
									}
								}, {
									coord : [ 118.506937, 24.006830 ]
								} ], [ {
									name : 'NE02',
									coord : [ 119.963300, 24.897777 ],
									lineStyle : {
										color : "#e1af2e" //橙色
									}
								}, {
									coord : [ 119.310821, 24.394112 ]
								} ], ]
							}
						}, {
							type : 'effectScatter',
							coordinateSystem : 'geo',
							zlevel : 0,
							rippleEffect : { //涟漪特效
								number : 3, //数量
								period : 10, //动画时间，值越小速度越快
								brushType : 'stroke', //波纹绘制方式 stroke, fill
								scale : 6
							//波纹圆环最大限制，值越大波纹越大
							},
							symbol : 'circle',
							symbolSize : 30,
							itemStyle : {
								color : '#fff',
								opacity : 0.0,
							},
							data : [ {
								name : "",
								value : [ 118.058, 25.925 ],
							} ],
						} ]
					}

					$.get("/station", function(data) {
						option3.series[0].markPoint.data.length = 0
						$.each(data.online, function() {
							option3.series[0].markPoint.data.push({
								name : this.name,
								coord : [ this.lon, this.lat ],
								symbol : "circle",
								symbolSize : 7,
								itemStyle : {
									color : "#00ff00",
								}
							})
						})

						$.each(data.offline, function() {
							option3.series[0].markPoint.data.push({
								name : this.name,
								coord : [ this.lon, this.lat ],
								symbol : "circle",
								symbolSize : 7,
								itemStyle : {
									color : "#7f8590",
								}
							})
						})

						$.each(data.error, function() {
							option3.series[0].markPoint.data.push({
								name : this.name,
								coord : [ this.lon, this.lat ],
								symbol : "circle",
								symbolSize : 7,
								itemStyle : {
									color : "#ff0000",
								}
							})
						})

						option3.series[0].markPoint.data.push({
							name : data.source.name,
							coord : [ data.source.lon, data.source.lat ],
							symbol : "image://images/source.png",
							symbolSize : 32,
							itemStyle : {
								color : "#00ff00",
							}
						})
						option3.series[1].data.length = 0
						option3.series[1].data.push({
							name : data.source.name,
							value : [ data.source.lon, data.source.lat ],
						})

						option3.series[0].markLine.data.length = 0
						$.each(data.route, function() {
							option3.series[0].markLine.data.push([ {
								name : this.name,
								coord : [ this.lon1, this.lat1 ],
								lineStyle : {
									color : "#0d6dec" //蓝色
								}
							}, {
								coord : [ this.lon2, this.lat2 ],
							} ])
						})
						// 使用刚指定的配置项和数据显示图表。
						map.setOption(option3);

						var total = data.online.length + data.offline.length
						$("#total").text(total)

						$("#online").text(data.online.length)
						$("#onlinebar").css(
								"width",
								(data.online.length / total * 100).toFixed(0)
										+ "%")

						$("#offline").text(data.offline.length)
						$("#offlinebar").css(
								"width",
								(data.offline.length / total * 100).toFixed(0)
										+ "%")

						$("#error").text(data.error.length)
						$("#errorbar").css(
								"width",
								(data.error.length / total * 100).toFixed(0)
										+ "%")

						$("#maxdis").text(data.maxDis.toFixed(0))
						$("#guncount").text(data.gun.length)
						$("#mag").text("ML" + data.mag)

						$.each(data.offset, function() {
							var m1 = (this.lon - data.source.lon) / 0.000009
							var m2 = (data.source.lat - this.lat) / 0.000009
							if (Math.abs(m1) < 4 && Math.abs(m2) < 4) {
								var circle = $("#circle").clone()
								circle.show()
								circle.css("margin-left", m1 * 43 + "px")
								circle.css("margin-top", m2 * 43 + "px")
								$("#offset").append(circle)
							}
						})
						$("#activecount").text(data.offset.length)
					})
				});

				//时间显示
				window.setInterval(function() {
					$("#time").text(new Date().toLocaleString('chinese', {
						hour12 : false
					}))
				}, 1000)
			})

			function fullscreen() {
				/*判断是否全屏*/
				var isFullscreen = document.fullScreenElement//W3C
						|| document.msFullscreenElement //IE
						|| document.mozFullScreenElement //火狐
						|| document.webkitFullscreenElement //谷歌
						|| false;
				if (!isFullscreen) {
					var el = document.documentElement;

					(el.requestFullscreen && el.requestFullscreen())
							|| (el.mozRequestFullScreen && el
									.mozRequestFullScreen())
							|| (el.webkitRequestFullscreen && el
									.webkitRequestFullscreen())
							|| (el.msRequestFullscreen && el
									.msRequestFullscreen())
				} else {
					document.exitFullscreen ? document.exitFullscreen()
							: document.mozCancelFullScreen ? document
									.mozCancelFullScreen()
									: document.webkitExitFullscreen ? document
											.webkitExitFullscreen()
											: document.msExitFullscreen ? document
													.msExitFullscreen()
													: ''
				}
			}
		</script>
	</body>
</html>